  import Vue from 'vue'
  import Vuex from 'vuex'

  Vue.use(Vuex)

  const state = {
    playList:[],    //播放列表
    playContent:{}, //当前歌曲信息
    // current:'',     //当前歌曲的播放进度
    currentIndex:0, //当前索引值
    userInfo: window.localStorage.getItem('currentUserInfo') === 'null' ? null : JSON.parse(window.localStorage.getItem('currentUserInfo')),
  }
  const getters = {
  }
  const mutations = {
    // 1.是否把歌曲添加到列表
    addSongs(state, payload) {
      //让添加的歌曲成为当前播放的歌曲
      state.playContent = payload
      //判断添加的歌曲是否已经存在
      const result = !state.playList.find(item => item.playId === payload.playId)
      result ? state.playList.push(payload) : ''
    },
    // 2.点击“播放全部”把歌单列表传过来
    playAll(state, payload){
      // 未处理的数组
      let untreatedList = payload.concat(state.playList)
      // 数组去重（用reduce方法）
      let treatedList = untreatedList.reduce((pre,cur)=>{
        let result = pre.find(item => item.playId === cur.playId)
        if(result){
          return pre
        }else{
          return pre.concat(cur)
        }
      },[])
      // 更新最新歌单数据
      state.playList = treatedList
      // 播放第一首歌曲
      state.playContent = payload[0]
    },
    // 3.清空歌单列表
    removeList(state){
      // state.playList.splice(0, state.playList.length)
      state.playList = []
      state.playContent = {}
    },
    // 4.删除单曲(此处还有bug，歌曲颜色与播放的歌曲不对应)
    removeSong(state, payload){
      // 找出当前播放歌曲的id在歌单中的位置
      let index = 0
      state.playList.forEach(item => {
        item.playId === state.playContent.playId ? state.currentIndex = index : ''
        index++
      })
      //如果删除的是正在播放的歌曲，如果还有下一首，那么删除后播放下一曲，如果删除的不是播放中的歌直接删除
      if(state.playList[payload].playId === state.playContent.playId){
        //删除对应的歌曲(splice方法改变原数组)
        state.playList.splice(payload, 1)
        // 判断下一首歌是否存在
        state.playList[payload] ? state.playContent = state.playList[payload] : state.playContent = {}
      }else if(payload < state.currentIndex){      //删除当前歌曲前面
        state.playList.splice(payload, 1)
        state.currentIndex--
      }else{                                       //删除当前歌曲后面
        state.playList.splice(payload, 1)
        // 删除的如果是最后一首将当前播放歌曲设置为空
        state.playList.length === 0 ? state.playContent = {} : ''
      }
    },
    // 5.双击歌单的单曲开始播放
    dblClick(state, payload) {
      state.playContent = state.playList[payload]
      // 将当前歌曲索引保存
      state.currentIndex = payload
    },
    // 6.(手动)改变歌曲Src了
    changeSrc(state){
      let index = 0
      state.playList.forEach(item => {
        //只为了获取当前索引
        item.playId === state.playContent.playId ? state.currentIndex = index : ''
        index++
        //给当前播放的歌曲追加一个状态,根据这个状态判断列表中的歌曲前面是显示数字还是显示播放暂停图标
        // item.isActive = false
        // state.playList[state.currentIndex].isActive = true
      })
      state.playList.forEach(item => {
        // 为何写在上面的循环里面不行，要把循环独立出来才能实现效果
        item.isActive = false
        state.playList[state.currentIndex].isActive = true
      })
    },
    // 7.(自动)播放下一首
    songChange(state, payload){
      state.playContent = state.playList[payload]
    },
    // 8.接收传来的歌词
    setLyric(state, payload){
      state.playContent.lyric = payload
    },

    //保存用户信息
    sendUserInfo(state, payload){
      state.userInfo = payload
    },
    //退出登录清空用户信息
    logout(state){
      state.userInfo = null
    },


  }
  const actions = {}
  export default new Vuex.Store({
    state,
    getters,
    mutations,
    actions
  })
